// 渲染省会列表
//   <option value="***">***</option>
// 选好了省会之后，展示省会之下城市
// 城市选好之后。展示城市之下的学校

// 1. 选择要使用的dom元素
var provinceDOM = document.querySelector("#province");
var cityDOM = document.querySelector("#city");
var schoolDOM = document.querySelector("#school");

// 2. 渲染省会
function init() {
   
    initEvents();
}

function initEvents() {
    // 初始化省会/城市/学校
    renderProvince();
    renderCity();
    // 给省会和城市下拉框绑定change事件
    provinceDOM.onchange = function () {
        renderCity(this.value);
    }
    cityDOM.onchange = function () {
        renderSchool(this.value);
    }
}
var renderProvince = function () {
    var provinceOptions = "";
    for (var key in province) {
        provinceOptions += `<option value="${key}">${province[key]}</option>`;
    }
    provinceDOM.innerHTML = provinceOptions;
}

var renderCity = function () {
    var provinceId = provinceDOM.value;
    var cityId = cityDOM.value;
    var cityObj = city[provinceId];
    var cityOptions = ""
    for (var key in cityObj) {
        cityOptions += `<option value="${key}">${cityObj[key]}</option>`;
    }
    cityDOM.innerHTML = cityOptions;

    renderSchool(cityId);
}

var renderSchool = function () {
    var cityId = cityDOM.value
    var schoolObj = allschool[cityId];
    var schoolOptions = ""
    for (var key in schoolObj) {
        schoolOptions += `<option value="${key}">${schoolObj[key]}</option>`;
    }
    schoolDOM.innerHTML = schoolOptions;
}
init();


